<template>
  <div class="app-container">
    <h2 style="text-align: center;">课程发布流程</h2>
    <el-steps  :active="2" finish-status="success">
      <el-step title="步骤 1" description="填写课程基本信息" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" description="创建课程基本大纲" icon="el-icon-tickets"></el-step>
      <el-step title="步骤 3" description="发布课程" icon="el-icon-upload"></el-step>
    </el-steps>
    <el-button @click="dialogVisible = true" type="primary" size="mini" icon="el-icon-circle-plus">
      添加章节
    </el-button>
    {{this.te}}
    <el-dialog
      title="添加章节信息"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      @closed="closeddialog">
      <el-form :model="eduChapter" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="章节名称" prop="title">
          <el-input v-model="eduChapter.title" placeholder="请输入章节的名称"></el-input>
        </el-form-item>
        <el-form-item label="章节排序" prop="sort">
          <el-input v-model="eduChapter.sort" style="width:12.5rem;"
            type="number"
            min="0"
            placeholder="请输入章节的排序"
            clearable>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :disabled="this.eduChapter.title.length>3?false:true" type="primary" @click="submitchapterinfo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改章节 -->
    <el-dialog
      title="修改章节信息"
      :visible.sync="dialogVisibleupdate"
      width="60%"
      :before-close="handleClose"
      @closed="closeddialog">
      <el-form :model="eduChapter" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="章节名称" prop="title">
          <el-input v-model="eduChapter.title" placeholder="请输入章节的名称"></el-input>
        </el-form-item>
        <el-form-item label="章节排序" prop="sort">
          <el-input v-model="eduChapter.sort" style="width:12.5rem;"
            type="number"
            min="0"
            placeholder="请输入章节的排序"
            clearable>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleupdate = false">取 消</el-button>
        <el-button :disabled="eduChapter.title.length>3?false:true" type="primary" @click="gotoupdatechapterinfo">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 添加小节 -->
    <el-dialog
      title="添加小节信息"
      :visible.sync="dialogVisibleaddvideo"
      width="60%"
      :before-close="handleClose"
      @closed="closeddialog">
      <el-form :model="eduVideo" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="小节名称" prop="title">
          <el-input v-model="eduVideo.title" placeholder="请输入小节的名称"></el-input>
        </el-form-item>
        <el-form-item label="小节排序" prop="sort">
          <el-input v-model="eduVideo.sort" style="width:12.5rem;"
            type="number"
            min="0"
            placeholder="请输入小节的排序"
            clearable>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleaddvideo = false">取 消</el-button>
        <el-button :disabled="this.eduVideo.title.length>3?false:true" type="primary" @click="submitvideoinfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 小节修改 -->
    <el-dialog
      title="修改小节信息"
      :visible.sync="dialogVisibleupdatevideo"
      width="60%"
      :before-close="handleClose"
      @closed="closeddialog">
      <el-form :model="eduVideo" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="小节名称" prop="title">
          <el-input v-model="eduVideo.title" placeholder="请输入小节的名称"></el-input>
        </el-form-item>
        <el-form-item label="小节排序" prop="sort">
          <el-input v-model="eduVideo.sort" style="width:12.5rem;"
            type="number"
            min="0"
            placeholder="请输入小节的排序"
            clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="当前视频" prop="videourl">
          <video style="float: left;" width="400" :src="eduVideo.videourl" controls="controls"></video>
        </el-form-item>
        <el-form-item label="小节视频">
          <div style="float: left;">
            <el-button @click="Vvideodelete(eduVideo.videourl)" size="mini" type="warning">删除原件</el-button>
          </div>
          <div style="margin-left: 0.125rem">
            <el-upload
              class="upload-demo"
              :limit="1"
              ref="uploadx"
              name="uploadx"
              action="http://localhost:9001/eduoss/uploadvideo"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="uploadvideosuccessed"
              style="margin-left: 6.25rem"
              accept="video/mp4"
              :auto-upload="false">
              <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
              <!-- <el-button style="margin-left: 10px;" size="mini" type="success" @click="submitUpload">上传到服务器</el-button> -->
              <div slot="tip" class="el-upload__tip">视频需要转码，请耐心等待</div>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleupdatevideo = false">取 消</el-button>
        <el-button :disabled="this.eduVideo.title.length>3?false:true" type="primary" @click="submitvideoupdate">确 定</el-button>
      </span>
    </el-dialog>




    <!-- 章节展示  折叠面板 -->
    <div style="margin-top: 0.1875rem;">
      <el-collapse>
        <el-collapse-item v-model="chapterlist" v-for="(chapter,index) in chapterlist" :key="chapter.id" :title="chapter.title" :name="index">
          <div style="float: right;">
            <el-button @click="addvideoinfox(chapter.id)" size="mini" type="primary" icon="el-icon-plus">添加小节</el-button>
            <el-button @click="clickupdatechapterbutton(chapter.id)" size="mini" type="primary" icon="el-icon-edit">修改章节</el-button>
            <el-button @click="deletechapter(chapter.id)" :disabled="chapter.videoVotypeList.length>0?true:false" size="mini" type="danger" icon="el-icon-delete">删除章节</el-button>
          </div>
          <div class="videoclass" v-for="videoVotype in chapter.videoVotypeList" :key="videoVotype.id">
            <i class="el-icon-collection-tag"></i>
          {{videoVotype.title}}
          <div>
            <video style="float: left;" width="200" height="180" :src="videoVotype.videourl" controls="controls"></video>
            <div style="float: right;margin-right: 0.625rem;">
              <el-button style="line-height: 0.4rem;" @click="updatevideodilog(videoVotype.id)" size="mini" type="primary" plain>修改</el-button>
              <el-button :disabled="videoVotype.videourl?true:false" style="line-height: 0.4rem;" @click="deletevideo(videoVotype.id)" size="mini" type="danger" plain>删除</el-button>
            </div>
          </div>

          </div>
        </el-collapse-item>
      </el-collapse>
    </div>


   <!-- <ul>
      <li v-for="chapter in chapterlist" :key="chapter.id">
        {{chapter.title}}
        <el-button size="mini" type="primary">修改</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete"></el-button>
        <ul>
          <li v-for="videoVotype in chapter.videoVotypeList" :key="videoVotype.id">{{videoVotype.title}}
          <el-button type="primary" icon="el-icon-delete"></el-button>
          </li>
        </ul>
      </li>
    </ul> -->
    <el-button type="primary"  style="margin-top: 30%;float: left;" @click="previous">上一步</el-button>
    <el-button type="primary"  style="margin-top: 30%;float: right;" @click="next">下一步</el-button>
  </div>

</template>

<script>
  import chapter from '@/api/edu/chapter'
  import video from '@/api/edu/video'
  export default {
    data() {
      return {
        te: '',
        active: 0,
        chapterlist: [],
        courseid: '',
        //添加课程的前端参数
        dialogVisible: false,
        dialogVisibleupdate: false,
        dialogVisibleaddvideo: false,
        dialogVisibleupdatevideo: false,
        //弹出框的表单数据
         eduChapter: {
           title: '',
           sort: '',
           courseId: ''
         },
         ruleForm: {
                  name: '',
                  region: '',
                  date1: '',
                  date2: '',
                  delivery: false,
                  type: [],
                  resource: '',
                  desc: ''
                },
                rules: {
                  title: [
                    { required: true, message: '请输入章节名称', trigger: 'blur' },
                    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                  ],
                  sort: [
                    { required: true, message: '请输入章节排序', trigger: 'blur' },
                  ],
                },
         // 小节参数
               eduVideo: {
           chapterId: "",
           courseId: "",
           duration: '0',
           isFree: 'false',
           playCount: 0,
           size: 0,
           sort: '',
           status: "string",
           title: "",
           version: 0,
           videoOriginalName: "string",
           videoSourceId: "string",
           videourl: '',
         },
         //删除小节视频辅助参数
         deleteVideoVo: {
           fileurl: '',
         },

      };

    },
    created(){
      if(this.$route.params && this.$route.params.id){
        this.courseid=this.$route.params.id
        this.getchapterinfo()
      }

    },
    methods: {
      //小节视频删除
      Vvideodelete(fileurl){
        if(fileurl!=null || fileurl.length>4){
          this.deleteVideoVo.fileurl=fileurl//参数赋值
          video.deletev(this.deleteVideoVo).then(response => {
            this.deleteVideoVo.fileurl=''
            this.eduVideo.videourl=''

            if(response.data.mes==true){
              this.$message({
                type: 'success',
                message: '小节视频删除成功'
              })
            }else{
              this.$message({
                type: 'error',
                message: '小节视频删除失败'
              })
            }
          })
        }else{
          this.$message({
            type: 'error',
            message: '服务器上没有视频文件'
          })
        }

      },
      //小节视频上传成功后  回调小节的地址  提交了之后要设置为空
      uploadvideosuccessed(res){
        this.eduVideo.videourl=res.data.videourl//涉及到异步的问题
        video.updatevideoinfo(this.eduVideo).then(response => {
          this.dialogVisibleupdatevideo=false
          this.getchapterinfo()
          //清理数据
          this.eduVideo.chapterId=""
          this.eduVideo.courseId= ""
          this.eduVideo.duration= '0'
          this.eduVideo.isFree= 'false'
          this.eduVideo.playCount= 0
          this.eduVideo.size= 0
          this.eduVideo.sort= ''
          this.eduVideo.status= "string"
          this.eduVideo.title= ""
          this.eduVideo.version= 0,
          this.eduVideo.videoOriginalName= "string"
          this.eduVideo.videoSourceId= "string"
          this.eduVideo.videourl= ''
          this.$refs['uploadx'].clearFiles()
          this.$message({
            type: 'success',
            message: '修改小节信息成功'
          })
        })
      },
      //小节视频上传
      submitUpload() {
              this.$refs['uploadx'].submit()
            },
            handleRemove(file, fileList) {
              console.log(file, fileList);
            },
            handlePreview(file) {
              console.log(file);
            },
      //删除小节
      deletevideo(videoid){
        video.deletevideobyidx(videoid).then(response => {
          this.getchapterinfo()
          this.$message({
            type: 'success',
            message: '小节删除成功'
          })
        })
      },
      //提交修改   先判断上传组件里是否有文件对象   有的话则先上传文件  然后回调url  最后再统一提交数据并且清理数据
      submitvideoupdate(){
        console.log('测试上传组件中是否有文件：',this.$refs['uploadx'].uploadFiles.length)
        if(this.$refs['uploadx'].uploadFiles.length>0){
          this.$refs['uploadx'].submit()
        }else{
          video.updatevideoinfo(this.eduVideo).then(response => {
            this.dialogVisibleupdatevideo=false
            this.getchapterinfo()
            this.eduVideo.chapterId=""
            this.eduVideo.courseId= ""
            this.eduVideo.duration= '0'
            this.eduVideo.isFree= 'false'
            this.eduVideo.playCount= 0
            this.eduVideo.size= 0
            this.eduVideo.sort= ''
            this.eduVideo.status= "string"
            this.eduVideo.title= ""
            this.eduVideo.version= 0,
            this.eduVideo.videoOriginalName= "string"
            this.eduVideo.videoSourceId= "string"
            this.eduVideo.videourl= ''
            this.$message({
              type: 'success',
              message: '修改小节信息成功'
            })
          })
        }
      },
      //打开小节修改弹出框的时候的    触发的事件  根据小节的id回显数据
      updatevideodilog(videoid){
        this.dialogVisibleupdatevideo=true
        video.getvideoinfobyidx(videoid).then(response => {
          this.eduVideo=response.data.eduVideo
          console.log('测试小节修改弹出框：',this.eduVideo)
        })
      },
      //添加小节信息
      addvideoinfox(chapterid){
        this.dialogVisibleaddvideo = true
        this.eduVideo.id=null
        this.eduVideo.chapterId=chapterid
        this.eduVideo.courseId=this.courseid

      },
      //提交小节信息
      submitvideoinfo(){
        video.addVideoinfo(this.eduVideo).then(response =>{
          this.dialogVisibleaddvideo=false
          this.getchapterinfo()
          this.$message({
            type: 'success',
            message: '添加小节信息成功'
          })
        })
      },
      //根据章节的id删除章节
      deletechapter(chapterid){
        chapter.deletechapterbyIDx(chapterid).then(response => {
          this.getchapterinfo()
          this.$message({
            type: 'success',
            message: '已经删除章节'
          })
        })
      },
      //点击修改章节的按钮
      clickupdatechapterbutton(chapterid){
        this.dialogVisibleupdate = true
        chapter.getchapterinfobyID(chapterid).then(response => {
          this.eduChapter=response.data.educhapter
          console.log('测试修改章节时的数据：',this.eduChapter)

        })
      },
      //确认修改章节
      gotoupdatechapterinfo(educhapter){
        chapter.updatechapterbyID(this.eduChapter).then(response => {
          this.dialogVisibleupdate=false
          this.getchapterinfo()
          this.$message({
            type: 'success',
            message: '修改章节信息成功'
          })
        })
      },
      //章节添加 章节信息确认上传
      submitchapterinfo(){
        //课程的id需要赋值
        this.eduChapter.courseId=this.courseid
        console.log('测试添加章节的信息:',this.eduChapter)
        //先上传  再关闭弹窗
        chapter.addchapterx(this.eduChapter).then(response => {
          this.$message({
            type: 'success',
            message: '章节信息已上传'
          })

          //关闭dialog的弹窗
          this.dialogVisible=false
          //章节信息重新加载
          this.getchapterinfo()
        })
      },
      //dialog组件打开的时候，对dialog中的数据进行初始化
      closeddialog(){
        this.$refs.ruleForm.resetFields()
        this.eduChapter=this.$options.data().eduChapter
        this.eduVideo.title=''
        this.eduVideo.sort=''
      },
       //添加课程的抽屉
       handleClose(done) {
              this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
            },
      //根据课程id 获取章节和小结信息
      getchapterinfo(){
        chapter.getchapterinfobyid(this.courseid).then(response =>{
          this.chapterlist=this.$options.data().chapterlist
          this.chapterlist=response.data.chapterVotypeList
        })
      },
      previous(){//上一步的方法
        this.$router.push({path:'/course/info/'+this.courseid})
      },
      next() {
        // if (this.active++ > 2) this.active = 0;
        this.$router.push({path:'/course/save/'+this.courseid})
      }
    }
  }
</script>

<style>
  .videoclass{box-shadow:0px 0px 1px 1px gainsboro inset;margin:0.125rem auto;width: 100%;float: left;
  border-radius: 0.1875rem;
  line-height: auto;
  font-style: normal;
  font-display: unset;
  font-weight: 300;
  line-height: 250%;

  }
</style>
